<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Delay Demo</title>
		<style>
			html,
			body {
				margin: 0;
				padding: 0;
				font: normal 16px / 24px 'Source Sans Pro', 'Open Sans', 'Droid Sans',
					sans-serif;
				background: transparent;
				color: #000;
			}

			p {
				margin: 8px;
				padding: 0;
			}
			#loading {
				color: #959595;
			}

			.icon {
				display: inline-block;
				font-size: 24px;
				line-height: 1em;
				vertical-align: -0.25em;
				box-shadow: 0 0 0 1px #e00;
			}

			span.icon {
				--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath stroke-dasharray='60' stroke-dashoffset='60' d='M12 3L21 20H3L12 3Z'%3E%3Canimate fill='freeze' attributeName='stroke-dashoffset' dur='0.5s' values='60;0'/%3E%3C/path%3E%3Cpath stroke-dasharray='6' stroke-dashoffset='6' d='M12 10V14'%3E%3Canimate fill='freeze' attributeName='stroke-dashoffset' begin='0.6s' dur='0.2s' values='6;0'/%3E%3C/path%3E%3C/g%3E%3Ccircle cx='12' cy='17' r='1' fill='currentColor' fill-opacity='0'%3E%3Canimate fill='freeze' attributeName='fill-opacity' begin='0.8s' dur='0.4s' values='0;1'/%3E%3C/circle%3E%3C!-- 1653330569083 --%3E%3C/svg%3E");
				width: 1em;
				height: 1em;
				background-color: transparent;
				background-image: var(--svg);
				background-repeat: no-repeat;
				background-size: 100% 100%;
			}
		</style>
	</head>
	<body>
		<p>
			SVG:
			<svg
				xmlns="http://www.w3.org/2000/svg"
				width="1em"
				height="1em"
				viewBox="0 0 24 24"
				class="icon"
			>
				<g
					fill="none"
					stroke="currentColor"
					stroke-linecap="round"
					stroke-linejoin="round"
					stroke-width="2"
				>
					<path
						stroke-dasharray="60"
						stroke-dashoffset="60"
						d="M12 3L21 20H3L12 3Z"
					>
						<animate
							fill="freeze"
							attributeName="stroke-dashoffset"
							dur="0.5s"
							values="60;0"
						></animate>
					</path>
					<path stroke-dasharray="6" stroke-dashoffset="6" d="M12 10V14">
						<animate
							fill="freeze"
							attributeName="stroke-dashoffset"
							begin="0.6s"
							dur="0.2s"
							values="6;0"
						></animate>
					</path>
				</g>
				<circle cx="12" cy="17" r="1" fill="currentColor" fill-opacity="0">
					<animate
						fill="freeze"
						attributeName="fill-opacity"
						begin="0.8s"
						dur="0.4s"
						values="0;1"
					></animate>
				</circle>
			</svg>
		</p>
		<p>Background: <span class="icon"></span></p>
		<p id="loading">
			In some browsers when demo is restarted, background example will not
			restart.
		</p>
	</body>
</html>
